<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div class="card-header">
                <span>订单列表</span>
            </div>
        </template>
        <div class="input-btns">
            <el-input placeholder="请输入查询关键字" v-model="query">
                <template #append>
                    <el-button icon="Search" @click="resetInitOrdersList()"></el-button>
                </template>
            </el-input>
        </div>
        <el-table :data="orders" size="default" :border="true" stripe v-loading="isShowLoading"
            @expand-change="loadOrderDetail">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <el-table-column label="明细" type="expand" width="60" #="{ row }">
                <el-descriptions class="order-detail" :column="3" size="default" border>
                    <el-descriptions-item label="订单编号">{{ row.order_number }}</el-descriptions-item>
                    <el-descriptions-item label="支付方式">{{ row.order_pay }}</el-descriptions-item>
                    <el-descriptions-item label="收货地址">{{ row.consignee_addr }}</el-descriptions-item>
                    <el-descriptions-item label="发票类型">{{ row.order_fapiao_title }}</el-descriptions-item>
                    <el-descriptions-item label="公司名称">{{ row.order_fapiao_company }}</el-descriptions-item>
                    <el-descriptions-item label="发票内容">{{ row.order_fapiao_content }}</el-descriptions-item>
                    <el-descriptions-item label="商品" :span="3" v-for="g in ordersGoods[row.order_id]" :key="g.goods_id">
                        <span>{{ g.goods_name }}</span>
                        【<el-button type="primary" link @click="openGoodDetailDrawer(g)">详情</el-button>】
                    </el-descriptions-item>
                </el-descriptions>
            </el-table-column>
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="订单编号" prop="order_number"></el-table-column>
            <el-table-column label="支付状态" prop="pay_status" #="{ row }">
                <span v-if="row.pay_status == 1">
                    <el-icon color="#67C23A" size="20">
                        <SuccessFilled />
                    </el-icon>
                    已支付
                </span>
                <span v-else>
                    <el-icon color="#E6A23C" size="20">
                        <WarningFilled />
                    </el-icon>
                    未支付
                </span>
            </el-table-column>
            <el-table-column label="发货状态" prop="is_send"></el-table-column>
            <el-table-column label="下单时间" prop="create_time" :formatter="getDateTime"></el-table-column>
            <el-table-column label="更新时间" prop="update_time" :formatter="getDateTime"></el-table-column>
            <el-table-column label="操作" width="180px">
                <el-tooltip effect='dark' content='收货地址修改' placement='bottom'>
                    <el-button type='primary' size='small' @click="isShowEdit = true">
                        <el-icon>
                            <EditPen></EditPen>
                        </el-icon>
                    </el-button>
                </el-tooltip>
                <el-tooltip effect='dark' content='物流信息跟踪' placement='bottom'>
                    <el-button type='warning' size='small' @click="isShowRole = true">
                        <el-icon>
                            <Location />
                        </el-icon>
                    </el-button>
                </el-tooltip>
            </el-table-column>
        </el-table>
        <el-pagination small="small" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
            v-model:page-size="pageSize" v-model:current-page="pageNum" :page-sizes="[5, 10, 15, 20]"
            @size-change="resetInitOrdersList()" @current-change="initOrdersList()" />
        <!-- 商品详情展示 -->
        <el-drawer v-model="isShowGoodDetail" title="商品详情" size="40%">
            <div v-html="goodDetail.goods_introduce"></div>
        </el-drawer>
    </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { printLog, formatDate } from "@/util";
import ordersApi from "@/api/orders.js";
import goodsApi from "@/api/goods.js";

const getDateTime = function (row, column, cellValue) {
    return formatDate(new Date(cellValue * 1000))
}

let orders = ref([])
let total = ref(0)
let pageSize = ref(5)
let pageNum = ref(1)
let query = ref("")
let isShowLoading = ref(false)

const resetInitOrdersList = function () {
    pageNum.value = 1;
    initOrdersList();
}
const initOrdersList = async function () {
    try {
        isShowLoading.value = true;
        let result = await ordersApi.loadOrders({
            query: query.value,
            pagenum: pageNum.value,
            pagesize: pageSize.value
        })
        orders.value = result.goods;
        total.value = Number(result.total);
    } catch (error) {
        printLog(error)
    } finally {
        isShowLoading.value = false;
    }
}
initOrdersList()

let ordersGoods = ref({})
let ordersGoodsReady = {}

const loadOrderDetail = async function (row) {
    if (ordersGoodsReady[row.order_id]) {
        return;
    }
    ordersGoodsReady[row.order_id] = true;
    let { goods } = await ordersApi.loadOrderDetail(row.order_id);
    let goodsDetail = [];
    for (let g of goods) {
        let tempGoodDetail = await goodsApi.loadGoodDetail(g.goods_id)
        goodsDetail.push(tempGoodDetail)
    }
    ordersGoods['value'][row.order_id] = goodsDetail;
}

let isShowGoodDetail = ref(false)
let goodDetail = ref({})
const openGoodDetailDrawer = function(g){
    goodDetail.value = g;
    isShowGoodDetail.value = true;
}
</script>

<style lang="scss" scoped>
.input-btns {
    margin-bottom: 20px;

    .el-input {
        display: inline-flex;
        width: 400px;
        margin-right: 20px;
    }
}

.el-card {
    display: flex;
    flex-flow: column;

    :deep(.el-card__body) {
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        height: 100%;
        overflow: hidden;
    }
}

.el-pagination {
    justify-content: center;
    margin-top: 20px;
}

.tip {
    display: inline-block;
    margin: 0px 12px;
}

.el-icon {
    vertical-align: text-bottom;
}

.el-table :deep(.el-table__expanded-cell) {
    padding: 20px 40px;
}
</style>